<template>
	<div class="icons">
	  <swiper>
	  	<swiper-slide v-for="(page, index) of pages" :key="index">
		  <div class="icon"v-for="item of page" :key="item.id">
			 <div class="icon-img">
			    <img class="icon-img-content" :src="item.imgUrl"/>
			  </div>
			  <p class="icon-desc">{{item.desc}}</p>
			</div>
	    </swiper-slide>
	  </swiper>
	</div>
</template>

<script>
export default{
	name:'HomeIcons',
	data () {
		return{
			iconList:[{
				id:'0001',
				imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
				desc:'景点门票'
			},{
				id:'0002',
				imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/f0f00d6dfe038c044dbc9a437f58b0eb.png",
				desc:'北京一日游'
			},{
				id:'0003',
				imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/f0f00d6dfe038c044dbc9a437f58b0eb.png",
				desc:'北京一日游'
			},{
				id:'0004',
				imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/f0f00d6dfe038c044dbc9a437f58b0eb.png",
				desc:'北京一日游'
			},{
				id:'0005',
				imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/f0f00d6dfe038c044dbc9a437f58b0eb.png",
				desc:'北京一日游'
			},{
				id:'0006',
				imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/f0f00d6dfe038c044dbc9a437f58b0eb.png",
				desc:'北京一日游'
			},{
				id:'0007',
				imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/f0f00d6dfe038c044dbc9a437f58b0eb.png",
				desc:'北京一日游'
			},{
				id:'0008',
				imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/f0f00d6dfe038c044dbc9a437f58b0eb.png",
				desc:'北京一日游'
			},{
				id:'0009',
				imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/f0f00d6dfe038c044dbc9a437f58b0eb.png",
				desc:'北京一日游'
			}]
		}
	},
	computed:{
		pages () {
			const pages = []
			this.iconList.forEach((item,index) => {
				const page =Math.floor(index / 8)
				if (!pages[page]) {
					pages[page] = []
				}
				pages[page].push(item)
			})
			return pages
		}
	}
}
</script>

<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	@import '~styles/mixins.styl'
	  .icons >>> .swiper-container
	    height:0
	    padding-bottom:50%

	  .icon
	  	position:relative
	  	overflow:hidden
	  	float:left
	  	width:25%
	  	height:0

	  	padding-bottom:25%
	  	.icon-img
	  	  position:absolute
	  	  top:0
	  	  left:0
	  	  right:0
	  	  bottom:22px;
	  	  box-sizing:border-box
	  	  padding:5px	  	 
	  	  .icon-img-content
	  	  	display:block
	  	  	height:100%
	  	  	margin:0 auto
	  	.icon-desc
	  	  position:absolute
	  	  left:0
	  	  right:0
	  	  bottom:0
	  	  height:22px
	  	  line-height:22px
	  	  text-align:center
	  	  color: $darkTextColor
				ellipsis()
</style>